<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HR系统修复测试页面</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
        }
        
        .test-title {
            color: #667eea;
            font-size: 1.5rem;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .test-button {
            background: #667eea;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        
        .test-button:hover {
            background: #5a6fd8;
        }
        
        .test-result {
            margin-top: 15px;
            padding: 15px;
            border-radius: 6px;
            font-family: monospace;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .candidate-card {
            border: 2px solid #e9ecef;
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            background: #f8f9fa;
        }
        
        .candidate-card h4 {
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-success { background: #28a745; }
        .status-warning { background: #ffc107; }
        .status-error { background: #dc3545; }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🔧 HR系统修复验证测试</h1>
        <p>此页面用于验证HR系统的修复是否成功。</p>
        
        <!-- API连接测试 -->
        <div class="test-section">
            <div class="test-title">1. API连接测试</div>
            <button class="test-button" onclick="testApiConnection()">测试基础连接</button>
            <button class="test-button" onclick="testCandidatesList()">测试候选人列表</button>
            <button class="test-button" onclick="testCandidateDetail()">测试候选人详情</button>
            <div id="apiTestResult" class="test-result info" style="display: none;"></div>
        </div>
        
        <!-- 候选人数据测试 -->
        <div class="test-section">
            <div class="test-title">2. 候选人数据验证</div>
            <button class="test-button" onclick="validateCandidateData()">验证候选人27018550数据</button>
            <button class="test-button" onclick="testResumeContent()">测试简历内容</button>
            <div id="candidateTestResult" class="test-result info" style="display: none;"></div>
        </div>
        
        <!-- 前端功能测试 -->
        <div class="test-section">
            <div class="test-title">3. 前端功能测试</div>
            <button class="test-button" onclick="testButtonEvents()">测试按钮事件</button>
            <button class="test-button" onclick="testDataDisplay()">测试数据显示</button>
            <button class="test-button" onclick="simulateButtonClicks()">模拟按钮点击</button>
            <div id="frontendTestResult" class="test-result info" style="display: none;"></div>
        </div>
        
        <!-- 综合测试结果 -->
        <div class="test-section">
            <div class="test-title">4. 测试总结</div>
            <div id="testSummary" class="test-result info">
                点击上方按钮开始测试...
            </div>
        </div>
    </div>

    <script>
        const apiBaseUrl = window.location.origin;
        let testResults = {
            apiConnection: false,
            candidatesData: false,
            frontendFunctions: false
        };

        function updateTestResult(elementId, content, type = 'info') {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.className = `test-result ${type}`;
            element.textContent = content;
        }

        function updateTestSummary() {
            const summary = document.getElementById('testSummary');
            const total = Object.keys(testResults).length;
            const passed = Object.values(testResults).filter(r => r).length;
            
            let status = 'info';
            let icon = '⏳';
            
            if (passed === total) {
                status = 'success';
                icon = '✅';
            } else if (passed > 0) {
                status = 'info';
                icon = '🔄';
            } else {
                status = 'error';
                icon = '❌';
            }
            
            summary.className = `test-result ${status}`;
            summary.textContent = `${icon} 测试进度: ${passed}/${total} 通过\n\n详细结果:\n` +
                `API连接: ${testResults.apiConnection ? '✅' : '❌'}\n` +
                `数据验证: ${testResults.candidatesData ? '✅' : '❌'}\n` +
                `前端功能: ${testResults.frontendFunctions ? '✅' : '❌'}`;
        }

        async function testApiConnection() {
            try {
                updateTestResult('apiTestResult', '正在测试API连接...', 'info');
                
                const response = await fetch(`${apiBaseUrl}/api/candidates?limit=1`);
                const data = await response.json();
                
                if (response.ok && data.success) {
                    testResults.apiConnection = true;
                    updateTestResult('apiTestResult', 
                        `✅ API连接成功!\n` +
                        `状态码: ${response.status}\n` +
                        `候选人总数: ${data.total}\n` +
                        `响应时间: ${Date.now() - startTime}ms`, 
                        'success'
                    );
                } else {
                    throw new Error(`API返回错误: ${data.error || '未知错误'}`);
                }
            } catch (error) {
                testResults.apiConnection = false;
                updateTestResult('apiTestResult', 
                    `❌ API连接失败: ${error.message}`, 
                    'error'
                );
            }
            updateTestSummary();
        }

        async function testCandidatesList() {
            try {
                updateTestResult('apiTestResult', '正在测试候选人列表...', 'info');
                
                const response = await fetch(`${apiBaseUrl}/api/candidates?limit=5`);
                const data = await response.json();
                
                if (response.ok && data.success && data.data) {
                    const candidates = data.data;
                    updateTestResult('apiTestResult', 
                        `✅ 候选人列表获取成功!\n` +
                        `获取到 ${candidates.length} 个候选人\n` +
                        `示例候选人: ${candidates.map(c => c.name).join(', ')}\n` +
                        `总计: ${data.total} 个候选人`, 
                        'success'
                    );
                } else {
                    throw new Error('候选人列表格式不正确');
                }
            } catch (error) {
                updateTestResult('apiTestResult', 
                    `❌ 候选人列表测试失败: ${error.message}`, 
                    'error'
                );
            }
        }

        async function testCandidateDetail() {
            try {
                updateTestResult('apiTestResult', '正在测试候选人详情API...', 'info');
                
                const response = await fetch(`${apiBaseUrl}/api/candidates/27018550`);
                const data = await response.json();
                
                if (response.ok && data.success && data.candidate) {
                    const candidate = data.candidate;
                    updateTestResult('apiTestResult', 
                        `✅ 候选人详情API工作正常!\n` +
                        `候选人ID: ${candidate.id}\n` +
                        `姓名: ${candidate.name}\n` +
                        `分类: ${candidate.category}\n` +
                        `分数: ${candidate.score}\n` +
                        `简历内容长度: ${candidate.Resume_str ? candidate.Resume_str.length : 0}字符\n` +
                        `HTML内容长度: ${candidate.Resume_html ? candidate.Resume_html.length : 0}字符`, 
                        'success'
                    );
                } else {
                    throw new Error(`候选人详情API错误: ${data.error || '未知错误'}`);
                }
            } catch (error) {
                updateTestResult('apiTestResult', 
                    `❌ 候选人详情API测试失败: ${error.message}`, 
                    'error'
                );
            }
        }

        async function validateCandidateData() {
            try {
                updateTestResult('candidateTestResult', '正在验证候选人27018550数据...', 'info');
                
                const response = await fetch(`${apiBaseUrl}/api/candidates/27018550`);
                const data = await response.json();
                
                if (!response.ok || !data.success) {
                    throw new Error('API调用失败');
                }
                
                const candidate = data.candidate;
                const validations = [];
                
                // 验证基本信息
                validations.push(`ID: ${candidate.id === '27018550' ? '✅' : '❌'} (${candidate.id})`);
                validations.push(`姓名: ${candidate.name ? '✅' : '❌'} (${candidate.name})`);
                validations.push(`分类: ${candidate.category ? '✅' : '❌'} (${candidate.category})`);
                
                // 验证简历内容
                const hasResumeStr = candidate.Resume_str && candidate.Resume_str.trim().length > 100;
                const hasResumeHtml = candidate.Resume_html && candidate.Resume_html.trim().length > 100;
                validations.push(`文本简历: ${hasResumeStr ? '✅' : '❌'} (${candidate.Resume_str ? candidate.Resume_str.length : 0}字符)`);
                validations.push(`HTML简历: ${hasResumeHtml ? '✅' : '❌'} (${candidate.Resume_html ? candidate.Resume_html.length : 0}字符)`);
                
                // 验证分数
                const hasScore = candidate.score && candidate.score > 0;
                validations.push(`评分: ${hasScore ? '✅' : '❌'} (${candidate.score})`);
                
                const allValid = validations.every(v => v.includes('✅'));
                testResults.candidatesData = allValid;
                
                updateTestResult('candidateTestResult', 
                    `${allValid ? '✅' : '❌'} 候选人数据验证${allValid ? '成功' : '失败'}:\n\n` +
                    validations.join('\n'), 
                    allValid ? 'success' : 'error'
                );
                
            } catch (error) {
                testResults.candidatesData = false;
                updateTestResult('candidateTestResult', 
                    `❌ 数据验证失败: ${error.message}`, 
                    'error'
                );
            }
            updateTestSummary();
        }

        async function testResumeContent() {
            try {
                updateTestResult('candidateTestResult', '正在测试简历内容格式化...', 'info');
                
                const response = await fetch(`${apiBaseUrl}/api/candidates/27018550`);
                const data = await response.json();
                
                if (!response.ok || !data.success) {
                    throw new Error('无法获取候选人数据');
                }
                
                const candidate = data.candidate;
                const resumeText = candidate.Resume_str || '';
                const resumeHtml = candidate.Resume_html || '';
                
                const preview = resumeText.substring(0, 200) + (resumeText.length > 200 ? '...' : '');
                
                updateTestResult('candidateTestResult', 
                    `✅ 简历内容测试成功!\n\n` +
                    `文本格式长度: ${resumeText.length}字符\n` +
                    `HTML格式长度: ${resumeHtml.length}字符\n\n` +
                    `内容预览:\n${preview}`, 
                    'success'
                );
                
            } catch (error) {
                updateTestResult('candidateTestResult', 
                    `❌ 简历内容测试失败: ${error.message}`, 
                    'error'
                );
            }
        }

        function testButtonEvents() {
            try {
                updateTestResult('frontendTestResult', '正在测试前端按钮事件...', 'info');
                
                // 检查全局对象
                const hasLivingWorkspace = typeof window.livingWorkspace !== 'undefined';
                const hasLayoutFixes = typeof window.layoutFixes !== 'undefined';
                
                let results = [];
                results.push(`Living Workspace对象: ${hasLivingWorkspace ? '✅' : '❌'}`);
                results.push(`Layout Fixes对象: ${hasLayoutFixes ? '✅' : '❌'}`);
                
                // 检查修复脚本是否加载
                const scriptsLoaded = document.querySelectorAll('script[src*="living_workspace_fixes"]').length > 0;
                results.push(`修复脚本已加载: ${scriptsLoaded ? '✅' : '❌'}`);
                
                const allGood = hasLivingWorkspace && scriptsLoaded;
                testResults.frontendFunctions = allGood;
                
                updateTestResult('frontendTestResult', 
                    `${allGood ? '✅' : '❌'} 前端环境检查${allGood ? '通过' : '失败'}:\n\n` +
                    results.join('\n'), 
                    allGood ? 'success' : 'error'
                );
                
            } catch (error) {
                testResults.frontendFunctions = false;
                updateTestResult('frontendTestResult', 
                    `❌ 前端测试失败: ${error.message}`, 
                    'error'
                );
            }
            updateTestSummary();
        }

        function testDataDisplay() {
            try {
                updateTestResult('frontendTestResult', '正在测试数据显示功能...', 'info');
                
                // 检查关键DOM元素是否存在
                const elements = [
                    'prosContent',
                    'consContent', 
                    'resumeContent',
                    'scoreText'
                ];
                
                const results = elements.map(id => {
                    const exists = !!document.getElementById(id);
                    return `${id}: ${exists ? '✅' : '❌'}`;
                });
                
                // 由于这是测试页面，元素可能不存在，这是正常的
                updateTestResult('frontendTestResult', 
                    `📋 DOM元素检查 (在实际页面中应该存在):\n\n` +
                    results.join('\n') + '\n\n' +
                    `注意: 这些元素在living_workspace.html页面中才会存在`, 
                    'info'
                );
                
            } catch (error) {
                updateTestResult('frontendTestResult', 
                    `❌ 数据显示测试失败: ${error.message}`, 
                    'error'
                );
            }
        }

        function simulateButtonClicks() {
            updateTestResult('frontendTestResult', 
                `🔄 按钮点击模拟:\n\n` +
                `由于这是测试页面，无法直接测试Living Workspace的按钮。\n` +
                `请在实际的living_workspace.html页面中测试:\n\n` +
                `1. 打开 http://localhost:8090/living_workspace.html\n` +
                `2. 选择候选人27018550\n` +
                `3. 点击"重新分析"按钮\n` +
                `4. 点击"生成面试题"按钮\n` +
                `5. 检查AI分析和原始简历内容是否正确显示`, 
                'info'
            );
        }

        // 页面加载时自动运行基础测试
        window.addEventListener('DOMContentLoaded', () => {
            console.log('🔧 HR系统修复测试页面已加载');
            updateTestSummary();
        });
    </script>
</body>
</html>




